<template>
  <div class="home">
    <main>
      <!-- 引入子路由 -->
      <router-view />
    </main>
    <footer>
      <router-link to="/home/movie">电影</router-link>
      <router-link to="/home/cinema">影院</router-link>
      <router-link to="/home/mine">个人中心</router-link>
    </footer>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.home{
  height: 100vh;
  display: flex;
  flex-direction: column;
  main{
    flex: 1;
    overflow: hidden;
  }
  footer {
    height: 50px;
    background: #eeeeee;
    display: flex;
    a{
      flex: 1;
      text-align: center;
      line-height: 50px;
    }
    .router-link-active{
      background: orange;
    }
  }
}

</style>